<template>
  <header class="tw-header">
    <div class="tw-header-inner">
      <!-- logo与平台名称 -->
      <h1 class="tw-header-inner-left">
        <a href="'/'" class="tw-header-logo">
          <img src="@assets/images/Logo.png" alt="">
          <!-- <span class="tw-econav-title">{{platform.title}}</span> -->
        </a>
      </h1>

      <!-- 搜索区 -->
      <div class="tw-header-search">
        <input type="text" v-model="searchWord" placeholder="" @keydown.enter="search" />
      </div>
    </div>
  </header>
</template>

<script setup>
  import { ref } from 'vue'
  const searchWord = ref('')      
  const search = () => {
    if (searchWord.value) {
      console.log(searchWord.value)
    }
  }

</script>

<style lang="scss" scoped>
  .tw-header {
    position: relative;
    height: 60px;
    line-height: 60px;

    z-index: 1001;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);

    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .tw-header-inner {
    width: 100%;
    position: relative;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
  }

  .tw-header-inner-left {
    min-width: 150px;
    padding: 0 20px;
  }

  .tw-header-inner-left img {
    max-height: 40px;
    margin-right: 10px;
  }

  .tw-header-search {

  }
  .tw-header-search input {
    background: #F6F8FD;
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    border-radius: 64px 64px 64px 64px;
    border: 1px solid #E3EBFF;
  }

.tw-header-logo {
  display: flex;
  align-items: center;
}
</style>
  